import React from 'react'
import ReactDOM from 'react-dom/client'
const root = ReactDOM.createRoot(document.getElementById('root'))

class Hello extends React.Component {
  state = {
    count: 0,
  }
  handleClick() {
    // console.log(33)
    console.log(this) // undefined
  }
  // 解决方案一：定义函数的地方改成箭头函数
  handleClick1 = () => {
    console.log(this.state.count)
  }
  render() {
    console.log(this)
    return (
      <>
        {/* 拿不到this的示范： */}
        <button onClick={this.handleClick}>按钮</button>
        <button onClick={this.handleClick1}>按钮1</button>
        {/* 第二种解决方案：调用的地方改成箭头函数 */}
        <button
          onClick={() => {
            this.handleClick()
          }}
        >
          按钮2
        </button>
        {/* 第三种解决方案：通过bind将render函数中的this绑定给事件处理函数 */}
        <button onClick={this.handleClick.bind(this)}>按钮3</button>
      </>
    )
  }
}
root.render(
  <>
    <Hello></Hello>
  </>
)
